<template>
  <div style="background: rgba(182,182,182,0.1)">
    <div style="display: flex;margin-left: 5%;margin-right: 5%;margin-top: 5%">
      <div style="width: 20%;height: 100%;background: rgba(255,229,229,0.47);padding-top: 20px">
        <el-input v-model="queryDate.info" style="width: 200px;margin-left: 35px" placeholder="输出要查询的内容"
                  @keyup.enter="query(queryDate.info)"/>
        <div style="margin-top: 10%;padding-left: 10%">
          <div style="font-size: large;font-weight: bold">筛选条件</div>
          <div style="width: 150px">
            <el-button type="success" v-show="false">最近7天</el-button>
            <el-button type="primary" style="margin-top: 20px" @click="changeDay(7)">最近7天</el-button>
            <el-button type="success" style="margin-top: 20px" @click="changeDay(30)">最近30天</el-button>
            <el-button type="info" style="margin-top: 20px" @click="changeDay(60)">最近2个月</el-button>
            <el-button type="warning" style="margin-top: 20px" @click="changeDay(180)">最近半年</el-button>
          </div>

          <div style="font-size: large;font-weight: bold;margin-top: 50px">公告类型</div>
        </div>
        <div style="width: 200px;margin-left: 30px;padding-bottom: 50px">
          <el-button v-show="false">Default</el-button>
          <el-button style="width: 150px;margin-top: 10px;background: #d9d9d9" @click="changeType(1)">系统维护</el-button>
          <el-button style="width: 150px;margin-top: 10px;background: #d9d9d9" @click="changeType(2)">功能更新</el-button>
          <el-button style="width: 150px;margin-top: 10px;background: #d9d9d9" @click="changeType(3)">活动更新</el-button>
          <el-button style="width: 150px;margin-top: 10px;background: #d9d9d9" @click="changeType(4)">安全公告</el-button>
        </div>
      </div>
      <div style="width: 75%;background: rgba(76,175,80,0);margin-left: 5%;margin-top: -11px">
        <div style="">
          <el-card style="margin-top: 20px" v-for="item in announcement">
            <div style="display: flex">
              <div style="width: 80%;font-weight: bold;font-size: large">{{ item.title }}</div>
              <div style="width: 20%;font-size: small">{{ item.createTime }}</div>
            </div>
            <div style="margin-top: 10px;background: rgba(129,129,129,0.27);padding: 3px;border-radius: 5px;width: 90px;text-align: center">{{ item.type }}</div>
            <div style="margin-top: 10px">{{ item.info }}</div>
          </el-card>
          <el-pagination
              v-model:current-page="queryDate.pageNum"
              v-model:page-size="queryDate.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :size="'small'"
              :disabled="disabled"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="getAnnouncement"
              @current-change="getAnnouncement"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getAnnouncementList} from "@/api/user";
import {parseTime2} from "@/utils/timeUtil";

export default {
  name: "SystemNotice",
  data() {
    return {
      queryDate: {
        pageNum: 1,
        pageSize: 10,
        day: null,
        info: '',
        type: null
      }, announcement: [{
        title: '标题',
        type: '系统维护',
        info: '内容',
        createTime: '2025年2月23日14:26:41'
      }, {
        title: '标题',
        type: '系统维护',
        info: '内容',
        createTime: '2025年2月23日14:26:41'
      }],
      total: 0,
    };
  },
  methods: {
    async query(info) {
      await this.resetQueryDate(); // 重置 queryDate
      this.queryDate.info = info; // 设置 info
      this.getAnnouncement(); // 等待异步方法完成
    },
    async changeType(type) {
      await this.resetQueryDate(); // 重置 queryDate
      this.queryDate.type = type; // 设置 type
      this.getAnnouncement(); // 等待异步方法完成
    },
    async changeDay(day) {
      await this.resetQueryDate(); // 重置 queryDate
      this.queryDate.day = day; // 设置 day
      this.getAnnouncement(); // 等待异步方法完成
    },
    resetQueryDate() {
      this.queryDate = {
        day: null,
        type: null,
        info: null,
        pageNum: this.queryDate.pageNum,
        pageSize: this.queryDate.pageSize
      };
    },
    getAnnouncement() {
      getAnnouncementList(this.queryDate).then(res => {
        res.data.list.forEach(v => {
          v.createTime = parseTime2(v.createTime)
          switch (v.type) {
            case 0:
              v.type = '系统维护';
              break;
            case 1:
              v.type = '功能更新';
              break;
            case 2:
              v.type = '活动更新';
              break;
            case 3:
              v.type = '安全公告';
              break;
            default:
              v.type = '系统更新';
          }
        })
        this.announcement = res.data.list
        this.total = res.data.totalCount
      })

    }
  },
  mounted() {
    this.getAnnouncement()
  },
};
</script>
<style>

</style>